<template>
	<div class="container">
		<el-row>
			<el-col class="userTitle">
				<p>权限列表</p>
			</el-col>
		</el-row>
		<section class="userContent">
			<div class="addUser">
				<el-row>
					<el-col :span="1">
						<el-button type="primary" @click="handleAdd">
							<i class="fa fa-plus" aria-hidden="true"></i>
							<span>新增权限</span>
						</el-button>
					</el-col>
					<el-col :span="4" :offset="19">
						<el-form  :inline="true" :model="filters">
							<el-form-item>
								<el-input placeholder="请输入权限名称" v-model="filters.moduleName" @keyup.enter.native="getUserPermissionList">
									<el-button slot="append" icon="search" v-on:click="getUserPermissionList"></el-button>
								</el-input>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<!-- 权限列表 -->
			<div class="userInfo">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column align="left" label="权限模块名称" prop="moduleName" sortable>
					</el-table-column>
					<el-table-column align="left" label="模块编码" prop="moduleCode" sortable>
					</el-table-column>
					<el-table-column align="left" label="权限编码" prop="permissionCode" sortable>
					</el-table-column>
					<el-table-column align="left" label="权限地址" prop="permissionUrl" :show-overflow-tooltip="true" sortable>
					</el-table-column>
					<el-table-column align="left" label="父级目录" width="120" prop="parentName" sortable>
					</el-table-column>
					<el-table-column align="left" label="权限类型" width="120" prop="permissionType" sortable>
					</el-table-column>
					<el-table-column align="left" label="创建时间" width="200" sortable :formatter="formatCreateTime" prop="createTime">
					</el-table-column>
					<el-table-column label="操作" align="left" width="180">
						<template slot-scope="scope">
							<el-button class="edit" size="small" type="text" @click="handleUpdate(scope.$index, scope.row)"><i class="el-icon-edit"></i>更新</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 分页 -->
			<div class="block" style="text-align: right;margin-top: 20px;">
				<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :total="totalNum" :page-size="pageSize">
				</el-pagination>
			</div>

			<!-- 新增权限dialog -->
			<el-dialog title="新增权限" size="tiny" :visible.sync="dialogRolesFormVisible" :close-on-click-modal="false">
				<el-form :model="addForm" ref="addForm">
					<el-form-item label="权限名称" label-width="80px">
						<el-input v-model="addForm.moduleName" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="模块编码" label-width="80px">
						<el-input v-model="addForm.moduleCode" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="权限编码" label-width="80px">
						<el-input v-model="addForm.permissionCode" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="模块地址" label-width="80px">
						<el-input v-model="addForm.permissionUrl" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="权限类型" label-width="80px">
						<el-select v-model="addForm.permissionType" size="small" placeholder="请选择权限类型">
							<el-option label="目录" value="0"></el-option>
							<el-option label="资源" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="父级目录" label-width="80px">
						<el-select v-model="addForm.parentId" size="small" placeholder="请选择父级目录">
							<el-option label="系统管理" value="1"></el-option>
							<el-option label="业务管理" value="6"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click="dialogRolesFormVisible = false">取 消</el-button>
					<el-button type="primary" size="small" @click="handleAddPermission" :loading="addLoading">确 定</el-button>
				</div>
			</el-dialog>

			<!-- 更新权限dialog -->
			<el-dialog title="更新权限" size="tiny" :visible.sync="dialogUpdateFormVisible" :close-on-click-modal="false">
				<el-form :model="editForm" ref="editForm">
					<el-form-item label="权限名称" prop="moduleName" label-width="80px">
						<el-input v-model="editForm.moduleName" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="模块编码" label-width="80px">
						<el-input v-model="editForm.moduleCode" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="权限编码" label-width="80px">
						<el-input v-model="editForm.permissionCode" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="模块地址" label-width="80px">
						<el-input v-model="editForm.permissionUrl" size="small" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="权限类型" label-width="80px">
						<el-select v-model="editForm.permissionType" size="small" placeholder="请选择权限类型">
							<el-option label="目录" value="0"></el-option>
							<el-option label="资源" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="父级目录" label-width="80px">
						<el-select v-model="editForm.parentId" size="small" placeholder="请选择父级目录">
							<el-option label="系统管理" value="1"></el-option>
							<el-option label="业务管理" value="6"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click="dialogUpdateFormVisible = false">取 消</el-button>
					<el-button type="primary" size="small" @click="handleEditPermission" :loading="editLoading">确 定</el-button>
				</div>
			</el-dialog>
		</section>
	</div>
</template>
<script>
	import { addPermission, getPermissionList, editPermission } from '../../api/api';
	import util from '../../common/util';
	export default {
		data() {
			return {
				filters: {
					moduleName: ''
				},
				editForm: {
					moduleName: '',
					moduleCode: '',
					permissionCode: '',
					permissionUrl: '',
					permissionType: '',
					parentId: '',
				},
				addLoading: false,
				dialogRolesFormVisible: false,
				dialogUpdateFormVisible: false,
				tableData: [{}],
				totalNum: 0,
				addForm: {
					moduleName: '',
					moduleCode: '',
					permissionCode: '',
					permissionUrl: '',
					permissionType: '',
					parentId: '',
					status: 1
				},
				pageIndex: 1,
				pageSize: 10,
				editLoading: false
			}
		},
		methods: {
			//			formatPermissionType: function (row, column) {
			//				return row.permissionType == 1 ? '资源' : row.permissionType == 0 ? '目录' : '';
			//			},
			query() {
				console.log('submit!');
			},
			handleUpdate(index, row) {
				this.dialogUpdateFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			handleDelete(index, row) { //delete permission
				console.log(index, row);
				this.$confirm('此操作将删除该信息条, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					closeOnClickModal: false,
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.getUserPermissionList();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pageIndex = val;
				this.getUserPermissionList();
			},
			formatCreateTime: function(row, column) {
				return row.createTime ? util.formatDate.format(new Date(row.createTime), 'yyyy年MM月dd日 hh:mm:ss') : '';
			},
			getUserPermissionList: function() {
				let param = {
					pageIndex: this.pageIndex,
					moduleName: this.filters.moduleName
				};
				getPermissionList(param).then((data) => {
					console.log(data);
					if(data.data.status === '200') {
						this.tableData = data.data.data;
						this.totalNum = data.data.totalNum;
						let len = this.tableData.length;
						for(let i = 0; i < len; i++) {
							if(this.tableData[i].permissionType == null) {
								return;
							} else {
								if(this.tableData[i].permissionType == 1) {
									this.tableData[i].permissionType = "资源";
								} else {
									this.tableData[i].permissionType = "目录";
								}
							}
						}
					} else {
						this.$message.error("系统异常,请稍后再试!");
					}

				});
			},
			handleAdd: function() {
				this.dialogRolesFormVisible = true;
				this.addForm = {
					moduleCode: '',
					moduleName: '',
					parentId: '',
					permissionCode: '',
					permissionUrl: '',
					permissionType: '',
					status: 1
				}
			},
			handleAddPermission: function() { // add Permission
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						this.$confirm("确认提交吗?", "提示", {}).then(() => {
							this.addLoading = true;
							let param = Object.assign({}, this.addForm);
						    addPermission(param).then((data) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.dialogRolesFormVisible = false;
								this.getUserPermissionList();
							});
						});
					}
				});
			},
			handleEditPermission: function() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let param = Object.assign({}, this.editForm);
							if(param.permissionType == "资源") {
								param.permissionType = 1;
							} else if(param.permissionType == "目录") {
								param.permissionType = 0;
							}
							editPermission(param).then((data) => {
								console.log(data)
								this.editLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.dialogUpdateFormVisible = false;
								this.$refs['editForm'].resetFields();
								this.getUserPermissionList();
							}).catch(() => {
								this.$message({
									type: 'info',
									message: '已取消操作'
								});
							});;
						});
					}
				})
			}
		},
		mounted() {
			this.getUserPermissionList();
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		.userTitle {
			width: 100%;
			text-align: left;
			font-size: 22px;
			color: #444;
			height: 60px;
			border-bottom: 4px solid #cdd1da;
			line-height: 60px;
			padding-left: 20px;
		}
		.userContent {
			padding: 10px;
			background: #fff;
			.addUser {
				margin: 3px 10px 10px;
			}
			.searchForm {
				.searchForm .el-col {
					height: 45px;
				}
			}
		}
		.userInfo {
			.el-table {
				font-size: 13px;
			}
			.edit {
				color: #3c8dbc;
			}
			.delete {
				color: #ff4949;
			}
		}
		.block {
			text-align: right;
			padding-top: 13px;
		}
		.el-select {
			display: block;
		}
	}
</style>